<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>汇找船登录</title>
    <meta charset="utf-8">
    <%--<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />--%>
    <link rel="shortcut icon" href="http://download2.huizhaochuan.com.cn/hzc_favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/shipui/css/plugins/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/ship/login.css">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/ship/reset.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        a{text-decoration: none;}
         a:visited{text-decoration: none;}
        a:hover {text-decoration: none;}
        a:active{text-decoration:none;}
    </style>
</head>
<body>
<div class="containerLogin">
    <div class="container_header">
        <div class="header_left">
            <div class="header_list">
                <div class="list" style="margin-top: 0px">
                    <img src="http://download2.huizhaochuan.com.cn/hzc_logo.png">
                </div>
                <%--<div class="list">--%>
                    <%--<p>产品</p>--%>
                <%--</div>--%>
                <%--<div class="list">--%>
                    <%--<p>功能说明</p>--%>
                <%--</div>--%>
                <%--<div class="list">--%>
                    <%--<p>关于我们</p>--%>
                <%--</div>--%>
            </div>
        </div>
        <div class="header_right">
            <span>服务电话:&nbsp;400-123-9981</span>
        </div>
    </div>
    <div class="loginLine" style="margin: 0"></div>
    <div class="container_body">
        <div class="body_left">
            <span style="margin-bottom: 10px;font-weight: 800;font-size: 48px;padding-bottom:10px; border-bottom:1px solid #fff; line-height: 2" onclick="test()">大数据找船<p>智能化管理</p></span>
            <%--<div style="margin-bottom: 20px;font-size: 24px;font-weight: 300">物联网+长江航运物流管理系统</div>--%>
            <%--<span class="customBtn" value="咨询客服"></span>--%>
        </div>
        <div class="body_right">
            <div id="myTab" class="loginTab">
                <span class="loginTabText  loginTabText-click"><a href="#pwdLogin" data-toggle="tab">密码登录</a></span>
                <span class="loginTabText" style="margin-left: 20px"><a href="#phoneLogin" data-toggle="tab">短信登录</a></span>
            </div>
            <div id="myTabContent" class="tab-content">
                <!--密码登录 -->
                <div class="tab-pane fade in active" id="pwdLogin">
                    <div class="loginInput" style="margin-top: 25px">
                        <input class="uname" type="text" id = "uname" placeholder="请输入账号">
                        <span class="uname_icon"><img src="${pageContext.request.contextPath}/assets/img/uname.png"></span>
                    </div>
                    <!-- 提示格式错误-->
                    <p id="uname_msg">&nbsp;&nbsp;</p>
                    <div class="loginInput" >
                        <input class="upwd" id = "upwd" type="password" placeholder="请输入密码">
                        <span class="upwd_icon"><img src="${pageContext.request.contextPath}/assets/img/pwd.png"></span>
                    </div>
                    <!-- 提示格式错误-->
                    <p id="upwd_msg">&nbsp;&nbsp;</p>
                    <div class="check">
                        <%--<a class="check_register" href="toRegister.do" style="color: #0d8ddb">立即注册</a>--%>
                        <a class="check_forgetPwd" href="toForgetPassword.do">忘记密码?</a>
                    </div>
                    <div class="login">
                        <input class="login_sub" type="button" id = "loginPBtn" value="登录"/>
                    </div>
                </div>

                <!--短信登录 -->
                <div class="tab-pane fade" id="phoneLogin" style="margin-top: 25px">
                    <div class="loginInput">
                        <input class="uphone" onblur="checkPhone()" id="uphone" type="text" placeholder="请输入手机号" style="color: #0C0C0C">
                        <span class="uphone_icon"><img src="${pageContext.request.contextPath}/assets/img/phoneNum.png"></span>
                    </div>
                    <!-- 提示格式错误-->
                    <p id="uphone_msg">&nbsp;&nbsp;</p>
                    <div class="code">
                        <div class="inputCode">
                            <input class="ver_code" id="ver_code" type="text" placeholder="输入验证码" style="color: #0C0C0C">
                            <span class="ucode_icon"><img src="${pageContext.request.contextPath}/assets/img/ver_code.png"></span>
                        </div>
                        <input class="getCode" type="button" id = "verificationBtn" value="获取验证码">
                    </div>
                    <div class="check">
                        <a class="check_register" href="toRegister.do" style="color: #0d8ddb">立即注册</a>
                        <a class="check_forgetPwd" href="toForgetPassword.do">忘记密码?</a>
                    </div>
                    <div class="login">
                        <input class="login_sub" type="button" id = "loginVBtn" value="登录"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="text-align: center;">
    <img src="http://download2.huizhaochuan.com.cn/center_img_web.jpg" style="width: 70%">
</div>

<div class="footer" style="background-image: url(http://download2.huizhaochuan.com.cn/footer_bg001.jpg);text-align: center">

    <div class="row" style="height: 422px">
        <div class="row" style="margin-top: 50px">
            <div class="col-xs-4 col-sm-4">
                <img src="http://download2.huizhaochuan.com.cn/foot_leftbg.png">
            </div>
            <div class="col-xs-4 col-sm-4">
                <iframe src="http://download2.huizhaochuan.com.cn/map5.html" style="width: 480px;height: 300px" frameborder="0"></iframe>
            </div>
            <div class="col-xs-4 col-sm-4">
                <img src="http://download2.huizhaochuan.com.cn/footer-rightbg.png">
            </div>
        </div>
        <div class="row" style="text-align: center;margin-top: 30px;color: white">
            <span>COPYRIGHT  2015-2018 芜湖市彦思科技有限公司 版权所有  皖ICP备1089102</span>
        </div>

    </div>
</div>


<script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>

<script type="text/javascript">

    //tab切换
    $(function () {
        $(".loginTabText").click(function () {
            $(".loginTabText").removeClass("loginTabText-click");
            $(this).addClass("loginTabText-click");
        })
    });


    $(document).keyup(function(event){
        if(event.keyCode ==13){
            $('#loginPBtn').click();
            }
        });


    <!-- 对输入的手机号正确性做判断-->
    function checkPhone() {
        var reg = /^1\d{10}$/;//正则表达式
        var phone = document.getElementById("uphone").value;
        var p = document.getElementById("uphone_msg");
        if (reg.test(phone)) {
            p.innerHTML = "手机号格式正确";
            p.style.color = "#5AB85C";
            return true;
        } else {
            p.innerHTML = "手机号格式不正确";
            p.style.color = "red";
            return false;
        }
    }

    $("#loginPBtn").click(function () {
        if (!$('#uname').val() || !$('#upwd').val()) {
            swal({
                title: "账号或密码不能为空",
                type: "warning"
            });
            return  false;
        }
        //使用ajax调接口
        var data=JSON.stringify({account:$('#uname').val(),password:$('#upwd').val()});
        $.ajax({
            url:'loginP.do',
            data:data,
            type:'post',
            dataType:'json',
            contentType:"application/json",
            success: function(result){
                if (result.SUCCESS) {
                    swal({
                        title: "欢迎使用汇找船系统",
                        text: "进入汇找船系统中...",
                        type: "success"
                    });
                    setTimeout(function(){
                        location.href="toIndex.do";
                    },2000);
                }
                else {
                    swal({
                        title: "账号或密码错误",
                        type: "warning"
                    });
                }
            }
        })
    });

    $("#verificationBtn").click(function(){
        var maxTime;
        var timer;
        //倒计时60s
        function CountDown() {
            if (maxTime >= 0) {
                $("#verificationBtn").val(maxTime + "S");
                $("#verificationBtn").attr("disabled",true);
                --maxTime;
            }
            else{
                clearInterval(timer);
                $("#verificationBtn").val("获取验证码");
                $("#verificationBtn").attr("disabled",false);
            }
            return;
        }
        if (!$('#uphone').val()) {
            alert("请输入手机号码");
            return  false;
        }
        // 使用ajax调接口
        var data = JSON.stringify({phoneNum:$('#uphone').val(),from:2});
        $.ajax({
            url:'sendVerification.do',
            data:data,
            type:'post',
            dataType:'json',
            success: function(result){
                if (result.SUCCESS) {
                    maxTime = 60;
                    timer = setInterval(CountDown, 1000);
                }
                else {
                    alert(result.MSG);
                }
            }
        })
    });

    $("#loginVBtn").click(function () {

        if (!$('#uphone').val() || !$('#ver_code').val()) {
            alert("手机号验证码不能为空");
            return  false;
        }
        //使用ajax调接口
        var data=JSON.stringify({phoneNum:$('#uphone').val(),verification:$('#ver_code').val()});
        $.ajax({
            url:'loginV.do',
            data:data,
            type:'post',
            dataType:'json',
            contentType:"application/json",
            success: function(result){
                if (result.SUCCESS) {

                    swal({
                        title: "彦思科技您好",
                        text: "欢迎进入汇找船系统！",
                        type: "success"
                    });
                    setTimeout(function(){
                        location.href="toIndex.do";
                    },2000);

                    //跳转到登录页
                    // location.href="toIndex.do";
                }
                else {
                    swal({
                        title: "抱歉，登录错误！",
                        text: result.MSG,
                        type: "warning"
                    });
                }
            }
        })
    });
</script>
</body>
</html>
